<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:replace="fragment/js::js"></div>
<script type="text/javascript" th:src="@{/js/upload/upload.js}"></script>
<style>
    /*修改layui表格的高度*/
    .layui-table-cell {
        height: auto;
    }
</style>
<body class="layui-card-body layui-card">
<div style="padding: 10px;" class="layui-card">
    <form id="queryForm" class="layui-form" method="post"
          style="display: flex;align-items: center">
        <div class="layui-hide-xs" style="display: flex;align-items: center">
            <span style="width: fit-content">用户昵称:</span>
            <input class="layui-input" name="nickName" id="nickName"
                   style="width: 120px;"/>
        </div>
        <div class="layui-hide-xs" style="display: flex;align-items: center;margin-left: 20px">
            <label style="width:  fit-content">真实姓名:</label><input class="layui-input" name="realName" id="realName"
                                                                   style="width: 120px"/>
        </div>
        <div style="display: flex;align-items: center;margin-left: 20px">
            <label style="width:  fit-content">手机号:</label><input class="layui-input" name="phone" id="phone"
                                                                  style="width: 120px"/>
        </div>

        <div style="display: flex;align-items: center;margin-left: 20px">
            <button type="button" class="layui-btn" id="queryBtn" lay-submit lay-filter="queryForm">查询</button>
        </div>
    </form>
    <table id="userTable" lay-filter="userTableFilter"></table>
    <!--        <div th:include="plugins/splitBar::splitBar"></div>-->

</div>
<!--查看这个角色的权限的弹框-->
<script type="text/html" id="showPermissionDiv">
    <div style="padding: 20px">
        <div style="display: flex;flex-wrap: wrap">
            <div th:each="r,rStat:${systemRoles}" class="layui-form" style="border: solid lightgray 1px;border-radius: 5px;padding: 10px;width: fit-content;margin: 5px">
                <input type="checkbox" name="roleTitle" lay-skin="primary" lay-filter="roleTitle"
                       th:id="'roleId-'+${r.flag}" th:ind="'role-'+${rStat.index}">
                <span style="font-size: 14px;font-weight: bold;cursor: pointer" th:text="${r.name}">角色名称</span>
<!--                第二级复选框-->
                <div style="padding-left: 20px">
                    <div th:each="p:${r.permissionVOS}" style="padding: 3px">
                        <input type="checkbox" lay-filter="permissionTitle" th:title="${p.name}"
                               th:name="'roleName-'+${r.flag}" th:pid="${p.permissionId}"
                               th:id="'permissionId-'+${p.flag}" lay-skin="primary">
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center">
            <button class="layui-btn layui-btn-danger" id="sureDispatch">确认调整</button>
            <button class="layui-btn warning" id="cancelDispatch">取消</button>
        </div>
    </div>
</script>
<!--添加用户界面-->
<script type="text/html" id="addForm">
    <form class="layui-form" style="padding: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-block">
                <input type="text" name="realName" placeholder="请输入用户昵称"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" placeholder="请输入用户密码" lay-verify="number"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="nickName" placeholder="请输入用户姓名"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入用户电话"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" placeholder="请输入用户邮箱"
                       style="width: 200px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传头像</label>
            <div class="layui-input-block">
                <div lh-upload id="photo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="commit">立即提交</button>
            </div>
        </div>
    </form>
</script>


<!--// 加上th:inline='javascript' 否则可能会因为小于或者大于符号导致 thymeleaf模板引擎解析错误。-->
<script th:inline="javascript" type="text/javascript">
    function deletePermissions(checkPermissions, layer, tb){     // ctrl+alt+m 提取代码
        let arr=[]
        checkPermissions.forEach((r)=>{
            console.log(r)
            let userItem={};
            userItem.userId = r.userId;
            // 只传递对象的id，节省很多宽带
            arr.push(userItem);
        });

        if (arr.length > 0) {   // 有值时才请求
            $.ajax({
                url: "/pages/back/user/deleteUsers",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                contentType: "application/json",// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                data: JSON.stringify(arr),// 要上传的参数
                dataType: 'json',// 服务器响应数据：json,text,html,xml
                error: function () {//请求错误的时候，会触发此函数
                    layer.msg("删除失败")
                },
                processData: true,//布尔值,一般都不用设置，规定通过请求发送的数据是否转换为查询字符串。默认是 true。如果此时上传的时候，有图片，这里必须设置false,
                success: function (data) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                    layer.msg(data.msg)
                    tb.reload();
                },
                type: 'post',// ajax请求的方式，post或get
            })
        }
    }

    $(function () {
        let systemRoles = [[${systemRoles}]];
        layui.use(['table', 'layer', 'laydate', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var form = layui.form;
            laydate.render({
                elem: '#creteDateRange' //指定元素
                , range: '至'
            });
            //第一个实例
            var userTable = table.render({
                elem: '#userTable'
                , page: true
                , url: '/pages/back/user/ajaxList' //数据接口
                , cols: [[ //表头
                    {width: 40, type: "checkbox"}
                    , {field: 'userId', title: 'ID', width: 60}
                    , {field: 'nickName', title: '用户昵称', width: 140}
                    , {field: 'realName', title: '真实姓名', width: 100}
                    , {
                        field: '', title: '用户头像', width: 100, templet: function (d) {
                            return '<div ><img showBig style="width: 50px;height: 50px;border-radius: 5px" src="' + d.photo + '"></div>'
                        }
                    }
                    , {field: 'phone', title: '手机号', width: 120}
                    , {field: 'lastLoginTime', title: '最近登陆时间', width: 160}
                    , {field: 'lastLoginIp', title: '最近登录ip', width: 140}
                    , {field: 'note', title: '备注', width: 140,edit:'text'}
                    , {
                        field: '', title: '操作', width: 180, templet: function (d) {
                            return '<div >' +
                                '<button class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="showPermissions">调整权限</button>' +
                                '<button class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="lock">锁定</button>' +
                                '</div>'
                        }
                    }
                ]]
                , toolbar: 'default'
                , done() {
                    showBigImg();
                }
            });
            let addForm;
            //监听头部工具栏的事件
            table.on('toolbar(userTableFilter)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'add':
                        addForm = layer.open({
                            type:1,
                            title:"用户添加",
                            content:$("#addForm").html()
                        })
                        uploadFile();// 一定要
                        form.render();
                        break;
                    case 'delete':
                        // 检查表格的选中状态
                        let checkStatus = table.checkStatus("userTable")
                        console.log(checkStatus)
                        if (!checkStatus.data.length>0){
                            layer.msg("请选择用户")
                            return false;
                        }
                        layer.confirm('你确定删除这'+checkStatus.data.length+"条数据吗？",function (index) {
                            let checkPermissions = checkStatus.data;
                            // 批量删除函数
                            deletePermissions(checkPermissions,layer,userTable) // 批量删除
                            layer.close(index)
                        })

                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                }
            });
            // 添加用户
            form.on('submit(commit)',function (d) {
                let formData = new FormData(d.form)
                console.log(formData)
                console.log(d.field)
                $.ajax({
                    url: "/pages/back/user/addUser",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                    contentType: "application/x-www-form-urlencoded",// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                    data: d.field,// 要上传的参数
                    dataType: 'json',// 服务器响应数据：json,text,html,xml
                    error: function () {//请求错误的时候，会触发此函数
                        layer.msg("添加失败")
                    },
                    processData: true,// 规定通过请求发送的数据是否转换为查询字符串。默认是 true。
                    success: function (data) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                        layer.msg(data.msg)
                        layer.close(addForm)
                        form.render()
                    },
                    type: 'post',// ajax请求的方式，post或get
                });
                return false;
            });

            table.on('edit(userTableFilter)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
                let p = {};
                p.userId = obj.data.userId;
                p[obj.field] = obj.value;
                $.post('/pages/back/user/edit', p, function (res) {
                        layer.msg(res.msg);
                    }
                );
            });
            //监听右侧工具栏事件
            table.on('tool(userTableFilter)', function (obj) {
                let d = obj.data;
                switch (obj.event) {
                    case 'showPermissions':
                        $.post('/pages/back/user/getUserRoles/' + d.phone, {}, function (res) {
                            let editRoleOpen = layer.open({
                                type: 1,
                                area: ['98%', '90%'],
                                title: '调整用户权限',
                                content: $('#showPermissionDiv').html() //这里content是一个普通的String
                            });
                            let hisRoles = res;//返回的是一个角色的集合（权限组）
                            // 让弹出界面选中角色以及权限
                            for (let x = 0; x < hisRoles.length; x++) {
                                let r = hisRoles[x];
                                $("[name=roleTitle]").each(function () {
                                    let flag = this.id.split('-')[1];
                                    if (flag == r.flag) {
                                        this.checked = true;
                                    }
                                });
                                let permissions = r.permissionVOS;// 拿到当前角色的权限
                                if(permissions!=null){
                                    for (let x = 0; x < permissions.length; x++) {
                                        let p = permissions[x];
                                        $("[id^=permissionId-]").each(function () {
                                            let flag = this.id.split('-')[1];
                                            if (flag == p.flag) {
                                                this.checked = true;
                                            }
                                        })
                                    }
                                }
                            }
                            // 当点击弹出的复选框时
                            form.on('checkbox(roleTitle)', function (data) {
                                let flag = data.elem.id.split('-')[1];
                                let checked = data.elem.checked;
                                $("[name=roleName-" + flag + "]").each(function () {
                                    this.checked = checked;
                                });
                                form.render();
                            });
                            form.on('checkbox(permissionTitle)', function (data) {
                                let flag = data.elem.name.split('-')[1];
                                let checked = false;
                                $("[name=roleName-" + flag + "]").each(function () {
                                    if (this.checked) {
                                        checked = this.checked;
                                        return false;// 结束循环
                                    }
                                });
                                // 改变一级复选框
                                $("#roleId-" + flag)[0].checked = checked;
                                form.render();
                            });
                            form.render();

                            // 点击取消按钮关闭修改角色的弹框
                            $("#cancelDispatch").click(function () {
                                layer.close(editRoleOpen)
                            });
                            // 确定修改
                            $("#sureDispatch").click(function () {
                                // 首先应该封装被选中的角色和权限的数据，应该封装成一个集合，这个集合是roleVO,而且里边的属性是permissionList是一个数组
                                let roleVOs = [];
                                // 对所有选中角色进行遍历，查看是否选中，选中就将其放到集合里边。
                                $("[name=roleTitle]").each(function () {
                                    if (this.checked) {
                                        // 获取系统级角色的下标
                                        let index = $(this).attr("ind").split('-')[1];
                                        let roleVO = [[${systemRoles}]][index];// 拿到开始传递过来的集合中的对象
                                        let permissionsStr = '';// 存储选中peimissionId集合字符串
                                        $("[name=roleName-" + roleVO.flag + "]").each(function () {//
                                            if (this.checked) {
                                                let pid = $(this).attr("pid"); // 获得permissionId
                                                permissionsStr += pid + ",";
                                            }
                                        });
                                        permissionsStr = permissionsStr.substring(0, permissionsStr.length - 1);
                                        roleVO.permissions = permissionsStr;
                                        // 最终要发送的数据
                                        roleVOs.push(roleVO);
                                    }
                                });
                                if (!roleVOs.length>0){
                                    layer.msg("请选择某个角色")
                                    return false;
                                }

                                $.ajax({                                             // 当前行数据d
                                    url: '/pages/back/user/dispatchUserPermission/' + d.userId,// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                                    contentType: "application/json",// 默认就是表单数据(不写)，如果此时要传递的是json字符串，
                                    // 那么此时就用application/json,如果此时要传递图片"multipart/form-data，还有数组，集合，还有对象，那么contentType必须指定为false
                                    data: JSON.stringify(roleVOs),// 要上传的参数,把数组对象转换为JSON字符串
                                    dataType: 'json',// 服务器响应数据：json,text,html,xml
                                    error: function () {//请求错误的时候，会触发此函数
                                    },
                                    processData: true,//布尔值,一般都不用设置，规定通过请求发送的数据是否转换为查询字符串。默认是 true。如果此时上传的时候，有图片，这里必须设置false,
                                    success: function (res) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                                        layer.msg(res.msg);
                                        layer.close(editRoleOpen)
                                    },
                                    type: 'post',// ajax请求的方式，post或get
                                });

                            });
                        });

                        break;
                    case 'lock':
                        // 锁定功能
                        layer.msg('锁定功能')
                        // $.post('/pages/back/user/lockUser/' + obj.data.userId, {}, function (res) {
                        //     layer.layer(res);
                        //     userTable.reload();
                        // });
                        break;
                    case 'edit':
                        // 在这之前还需要render(渲染)一把
                        break;
                }
            });
            form.on('submit(queryForm)', function (data) {
                userTable.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            onInput($("#queryForm input"));
        });
    })
    function onInput(jObj) {
        jObj.on({
            'input': function () {
                $("#queryBtn").click();// 这里直接换成查询按钮点击事件
            }
        })
    }

</script>


</body>


</html>
